<template>
    <div>
        <div class="top">
            <el-card>
                <div slot="header">
                    <span class="numItem"
                        >当前矿机总数量：<span class="totalNum">{{ num.totalNum }}</span></span
                    >
                    <span class="numItem"
                        >当前fail数量：<span class="failNum">{{ num.failNum }}</span></span
                    >
                    <span class="numItem"
                        >当前waring数量：<span class="warningNum">{{ num.warningNum }}</span></span
                    >
                    <span class="numItem"
                        >当前pass数量：<span class="passNum">{{ num.passNum }}</span></span
                    >
                    <el-button type="success" style="float:right;margin-left:20px" @click="goBack">返回上一页</el-button>
                    <div v-if="letTimes.nowTime" class="time">距离下次刷新还剩：{{ letTimes.nowTime }}</div>
                </div>

                <div class="bottom">
                    <div class="item" v-for="item in dataList" :key="item.id" @click="handleClick(item.serialNumber)">{{ '序列号：' + item.serialNumber }}</div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
let requestLoading
import { Loading } from 'element-ui'
import { mainBoardList } from '@/api/mainBoardList'
import store from '../../store'

export default {
    data() {
        return {
            letTimes: {
                nowTime: ''
            },
            num:{
                totalNum: 0,
                passNum: 0,
                warningNum: 0,
                failNum: 0,
            },
            dataList: [],
            queryParams:{
                pageNum:1,
                pageSize:50
            }
        };
    },
    created() {
        this.resetTime(120);
        this.getList()

        store.commit('setSystemTitle','矿机实时监控')
    },
    watch: {
        'letTimes.nowTime': {
            handler(val) {
                if (val === '00分钟：00秒') {
                    this.resetTime(120);
                    this.getList();
                }
            }
        }
    },
    methods: {
        getList() {
            this.starLoading()
            this.num = Object.assign(this.num,{
                passNum: 0,
                warningNum: 0,
                failNum: 0
            })
            mainBoardList(this.queryParams).then(res => {
                console.log(res);
                this.dataList = res.data.rows
                this.num.totalNum = res.data.total
                this.endLoading()
                res.data.rows.map(item => {
                    if (item.runResult === 'faile') {
                        this.num.failNum++
                    } else if (item.runResult === 'pass') {
                        this.num.passNum++
                    } else if (item.runResult === 'warning') {
                        this.num.warningNum++
                    }
                })
            })
        },
        resetTime(time) {
            const that = this;
            var timer = null;
            var t = time;
            var m = 0;
            var s = 0;
            m = Math.floor((t / 60) % 60);
            m < 10 && (m = '0' + m);
            s = Math.floor(t % 60);
            function countDown() {
                s--;
                s < 10 && (s = '0' + s);
                if (s.length >= 3) {
                    s = 59;
                    m = '0' + (Number(m) - 1);
                }
                if (m.length >= 3) {
                    m = '00';
                    s = '00';
                    clearInterval(timer);
                }
                // console.log(m + '分钟' + s + '秒');
                that.$set(that.letTimes, 'nowTime', `${m}分钟：${s}秒`);
            }
            timer = setInterval(countDown, 1000);
        },
        handleClick(SN){
            this.$router.push({
                path:'/detail',
                query:{
                    SN:SN
                }
            })
        },
        starLoading(){
            requestLoading = Loading.service({
                lock:true,
                text:'正在加载...',
                spinner:'el-icon-loading',
                background:'rgba(0,0,0,0.7)'
            })
        },
        endLoading(){
            requestLoading.close()
        },
        goBack(){
            this.$router.go(-1)
        }
    }
};
</script>

<style lang="less" scoped>
.top {
    .numItem {
        margin-right: 10px;
        .totalNum {
            font-size: 20px;
            font-weight: bold;
            color: #409EFF;
        }
        .warningNum {
            font-size: 20px;
            font-weight: bold;
            color: #E6A23C;
        }
        .passNum {
            font-size: 20px;
            font-weight: bold;
            color: #67C23A;
        }
        .failNum{
            font-size: 20px;
            font-weight: bold;
            color: #F56C6C;
        }
    }

    .time{
        float: right;
        padding: 3px 0;
        font-weight: bold;
    }

    .bottom{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .item{
            padding: 5px;
            margin: 0 15px 15px 0;
            cursor: pointer;
            border: 1px solid #67C23A;
            border-radius: 5px;
        }
    }
}
</style>